<template>
  <div class="danger-scroll">
    <div class="scroll-box">
      <p class="top">
        <svg-icon icon-class="home_warn_car" class-name="icon"/>
        <span>出入信息</span>
      </p>
      <vue-seamless-scroll :data="carList" class="content" :class-option="defaultOption">
        <ul >
          <li v-for="(item, index) in carList" :key="index" class="content-item">
            <span class="title" v-text="`${item.name}(${item.inOrOut == 1 ? '进' : '出'}) `"></span>
            <span class="date" v-text="item.entryTime"></span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div class="scroll-box wrap-box">
      <p class="top">
        <svg-icon icon-class="home_warn_person" class-name="icon"/>
        <span>报警信息</span>
      </p>
      <vue-seamless-scroll :data="warnList" class="content" :class-option="defaultOption">
        <ul >
          <li v-for="(item, index) in warnList" :key="index" class="content-item">
            <span class="title" v-text="item.name"></span>
            <span class="date" v-text="item.entryTime"></span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>

  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      carList: [
        {name: '刘', inOrOut: 1, entryTime: '2022.3.5 11:41:23'},
        {name: '晋J85258', inOrOut: 1, entryTime: '2022.3.5 11:41:23'},
        {name: '刘德华', inOrOut: 2, entryTime: '2022.3.5 11:41:23'},
        {name: '张学友', inOrOut: 2, entryTime: '2022.3.5 11:41:23'},
        {name: '周杰伦', inOrOut: 1, entryTime: '2022.3.5 11:41:23'},
        {name: '张三', inOrOut: 2, entryTime: '2022.3.5 11:41:23'},
        {name: '李四', inOrOut: 1, entryTime: '2022.3.5 11:41:23'},
        {name: '王五', inOrOut: 2, entryTime: '2022.3.5 11:41:23'},
        {name: '成二麻子', inOrOut: 1, entryTime: '2022.3.5 11:41:23'},
        {name: '上官', inOrOut: 1, entryTime: '2022.3.5 11:41:23'},
      ],
      warnList: [
        {name: '东大门被攻击1', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击2', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击3', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击4', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击5', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击6', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击7', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击8', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击9', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击10', entryTime: '2022.3.5 11:41:23'},
        {name: '东大门被攻击11', entryTime: '2022.3.5 11:41:23'},
      ]
    }
    
  },
  computed: {
    defaultOption () {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  .danger-scroll {
    display: flex;
    font-size: 13px;
    .scroll-box {
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      width: 50%;
      color: #494949;
      .top {
        padding: 10px 0;
        text-align: center;
        .icon {
          margin-right: 4px;
        }
      }
      .content {
        overflow: hidden;
        display: flex;
        justify-content: center;
        margin-top: 3px;
        height: 100%;
        .content-item {
          display: flex;
          justify-content: space-between;
          padding: 5px 0px;
          .title {
            margin-right: 100px;
          }
        }
        .content-item:hover {
          color: #209fff;
          cursor: pointer;
        }
      }
    }
    .wrap-box {
      color: #E75454;
    }
  }
</style>